ExtJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা MVC (Model-View-Controller) আর্কিটেকচার অনুসরণ করে, যা অ্যাপ্লিকেশন ডেভেলপমেন্টে কোডের মডুলারিটি এবং রক্ষণাবেক্ষণ সহজ করে। MVC আর্কিটেকচার অ্যাপ্লিকেশনের মডেল, ভিউ এবং কন্ট্রোলারকে পৃথকভাবে পরিচালনা করার জন্য ব্যবহৃত হয়, যা কোডের পুনঃব্যবহারযোগ্যতা এবং স্কেলেবিলিটি বৃদ্ধি করে।
MVC আর্কিটেকচারের ভূমিকা
- Model (মডেল)
- ডেটা এবং ডেটার লজিক নিয়ন্ত্রণ করে।
- ডেটা ফিল্ড, ভ্যালিডেশন, ডেটা ফেচিং, এবং আপডেটের কাজ করে।
- View (ভিউ)
- ইউজার ইন্টারফেস উপস্থাপন করে।
- ডেটাকে ভিজ্যুয়ালাইজ করার জন্য UI কম্পোনেন্ট ব্যবহার করে।
- Controller (কন্ট্রোলার)
- ভিউ এবং মডেলের মধ্যে সমন্বয় ঘটায়।
- ইউজার ইন্টারঅ্যাকশনের উপর ভিত্তি করে অ্যাপ্লিকেশন লজিক পরিচালনা করে।
MVC আর্কিটেকচার ব্যবহার করার জন্য ExtJS কনফিগারেশন
ExtJS প্রজেক্টে MVC আর্কিটেকচার ব্যবহার করতে, আমাদের তিনটি প্রধান অংশ তৈরি করতে হবে:
- Model (মডেল)
- View (ভিউ)
- Controller (কন্ট্রোলার)
১. Model (মডেল)
মডেল হলো অ্যাপ্লিকেশনের ডেটা এবং তার লজিকের প্রতিনিধিত্ব। মডেলে ডেটার গঠন এবং বৈশিষ্ট্য সংজ্ঞায়িত করা হয়।
মডেল উদাহরণ:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' }
]
});
extend:Ext.data.Modelক্লাস থেকে এটি প্রসারিত হয়।fields: মডেলের ডেটা ফিল্ডসমূহ।
২. View (ভিউ)
ভিউ অ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) উপস্থাপন করে। এটি গ্রিড, ফর্ম, প্যানেল, ট্যাব ইত্যাদি UI কম্পোনেন্টের মাধ্যমে ডেটা দেখায়।
ভিউ উদাহরণ:
Ext.define('MyApp.view.UserGrid', {
extend: 'Ext.grid.Panel',
xtype: 'usergrid', // ভিউটিকে এক্সটিআইপি ব্যবহার করে রেফারেন্স করা
title: 'User List',
store: {
model: 'MyApp.model.User',
autoLoad: true
},
columns: [
{ text: 'ID', dataIndex: 'id', flex: 1 },
{ text: 'Name', dataIndex: 'name', flex: 2 },
{ text: 'Email', dataIndex: 'email', flex: 3 }
]
});
xtype: এক্সটিআইপি ব্যবহার করে ভিউকে রেফারেন্স করা হয়।store: ডেটা স্টোর যা মডেলের মাধ্যমে ডেটা লোড এবং ম্যানেজ করে।columns: গ্রিডের কলামগুলি সংজ্ঞায়িত করা হয়।
৩. Controller (কন্ট্রোলার)
কন্ট্রোলার হলো লজিক্যাল অংশ যা ভিউ এবং মডেলের মধ্যে সমন্বয় ঘটায়। এটি ব্যবহারকারীর ইন্টারঅ্যাকশন বা অন্যান্য ইভেন্টগুলির উপর ভিত্তি করে অ্যাপ্লিকেশনের লজিক পরিচালনা করে।
কন্ট্রোলার উদাহরণ:
Ext.define('MyApp.controller.UserController', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'usergrid': {
itemclick: this.onUserClick
}
});
},
onUserClick: function(grid, record) {
Ext.Msg.alert('User Selected', 'Name: ' + record.get('name'));
}
});
init: কন্ট্রোলার ইনিশিয়ালাইজ হওয়ার পর এই মেথডটি কল হয়।control: ভিউতে ইভেন্ট হ্যান্ডলিং সুনির্দিষ্ট করে (যেমন,itemclickইভেন্ট)।onUserClick: গ্রিডের একটি আইটেমে ক্লিক করার পর কল হওয়া মেথড।
MVC আর্কিটেকচার ব্যবহার করে অ্যাপ্লিকেশন তৈরি
এখন, আমরা একটি সাধারণ MVC অ্যাপ্লিকেশন তৈরি করব যেখানে একটি গ্রিড ভিউ থাকবে, যা ব্যবহারকারীদের তালিকা দেখাবে।
প্রজেক্টের ফাইল স্ট্রাকচার:
/app
├── model
│ └── User.js
├── view
│ └── UserGrid.js
├── controller
│ └── UserController.js
├── Application.js
└── app.js
app.js (অ্যাপ্লিকেশন এন্ট্রি পয়েন্ট)
Ext.application({
name: 'MyApp',
requires: ['MyApp.view.UserGrid', 'MyApp.model.User', 'MyApp.controller.UserController'],
controllers: ['UserController'],
launch: function () {
Ext.create('MyApp.view.UserGrid', {
renderTo: Ext.getBody()
});
}
});
requires: যে ফাইলগুলি অ্যাপ্লিকেশনের জন্য প্রয়োজন, সেগুলি লোড করা হয়।controllers: কন্ট্রোলারের লিস্ট।
Application.js (অ্যাপ্লিকেশন কনফিগারেশন)
Ext.define('MyApp.Application', {
extend: 'Ext.app.Application',
name: 'MyApp',
launch: function() {
console.log('Application launched');
}
});
সারাংশ
- Model: ডেটার কাঠামো এবং ম্যানিপুলেশন।
- View: ইউজার ইন্টারফেস (UI) উপস্থাপন।
- Controller: ভিউ এবং মডেল এর মধ্যে সমন্বয় এবং লজিক পরিচালনা।
ExtJS এর MVC আর্কিটেকচার ডেভেলপারদের কোডকে সংগঠিত এবং স্কেলযোগ্য করে তোলে। এটি বড় ও জটিল অ্যাপ্লিকেশন তৈরি করার জন্য একটি আদর্শ প্যাটার্ন।
Read more
